<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style>
        h1 {
            color:#00ff00;  /*文本颜色*/
            text-align:center;/*right
                                  justify：每一行被展开为宽度相等，左，右外边距是对齐*/
            text-decoration:underline; /* none overline line-through  underline
                                             从设计的角度看 text-decoration属性主要是用来删除链接的下划线
                                             我们不建议强调指出不是链接的文本，因为这常常混淆用户。 */
            letter-spacing:10px;/*指定字符之间的空间*/
        }

        .uppercase {text-transform:uppercase;}  /*文本转换 用于所有字句变成大写或小写字母，或每个单词的首字母大写*/
        .lowercase {text-transform:lowercase;}
        .capitalize {text-transform:capitalize;}

        p {
            text-indent:50px;/*文本缩进属性是用来指定文本的第一行的缩进*/
            line-height:70%; /* 行与行之间的空间  大多数浏览器的默认行高约为110%至120%。*/

        }
        p.di{
            direction:rtl; /*元素的文本方向*/
        }
        p.word {
            word-spacing: 30px;/*设置字间距*/
        }
        p.no {
            white-space:nowrap;/*设置元素中空白的处理方式
                                    normal 	默认。空白会被浏览器忽略。
                                    pre 	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
                                    nowrap 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
                                    pre-wrap 	保留空白符序列，但是正常地进行换行。
                                    pre-line 	合并空白符序列，但是保留换行符。
                                    inherit 	规定应该从父元素继承 white-space 属性的值。
                                    object.style.whiteSpace="pre"
                                */
        }
        img.top {vertical-align:text-top;}/*垂直对齐*/
        img.bottom {vertical-align:text-bottom;}

        h2 {text-shadow:2px 2px #FF0000;}/*添加文本阴影*/
    </style>
</head>
<body>
<h1>哈哈</h1>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
<input type="text" class="lowercase"/>
<input type="text" class="uppercase"/>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p class="di">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p class="word">
    This is some text. This is some text.
</p>

<p class="no">
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>

<p>一个<img src="1.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p>
<p>一个<img class="top" src="1.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="1.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>

<h2>Text-shadow 效果</h2>
<p><b>注意：</b> Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。</p>

</body>
</html>